<template>
  <div>
    <!--按钮-->
    <el-button size="mini"
      type="primary"
      :disabled="btnDisabled"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitle}}({{buttonMeta.hotkey}})
    </el-button>
    <!--弹窗，表单   v-dialogdrag="buttonMeta.dialogWidth"-->
    <div v-dialog-drag="buttonMeta.dialogWidth" v-if="dialogInfo.isShow" >
      <el-dialog draggable
        :title="buttonMeta.dialogTitle"
        v-model="dialogInfo.isShow"
        :modal="true"
        :width="buttonMeta.dialogWidth"
        :close-on-click-modal="true"
        :destroy-on-close="true"
      >
        <el-scrollbar style="height:600px;margin: 2px;">
          <component
            :is="componentKind[buttonMeta.controlKey]"
            :moduleId="buttonMeta.openModuleId"
            :dataId="dataId"
            :formMetaId="buttonMeta.formMetaId"
            :actionId="buttonMeta.actionId"
            :type="buttonMeta.btnKind"
            :dialogInfo="dialogInfo"
          >
          </component>
        </el-scrollbar>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { ref, watch, reactive } from 'vue'
  import { ElButton, ElDialog, ElScrollbar } from 'element-plus'
  import { mykeydown } from '../map'

</script>

<script setup>

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String],
  dataId: [Number, String],
  active: Object, // 按钮的meta集合
  buttonMeta: Object,
  componentKind: {
    type: Object,
    default: () => {}
  }
})

// 弹窗信息
const dialogInfo = reactive({
  isShow: false
})

// 设置按钮是否可用
const btnDisabled = ref(true)

// 单击按钮，显示弹窗
const buttonClick = () => {
  // 按钮信息
  if (props.buttonMeta.btnKind === 'add') {
    dialogInfo.isShow = true // 是否显示弹窗
  } else if (!btnDisabled.value) {
    dialogInfo.isShow = true
  } else {
    const msgError = {
      type: 'info',  
      message: '请先选择一条记录。'
    }
    ElMessage(msgError)
  }
}

// 按钮快捷键
mykeydown(props.buttonMeta.hotkey, (e, isAlt) => {
  if (isAlt && props.active.moduleId === props.moduleId) {
    buttonClick()
  }
})

// 监听选择的变化，记入状态
watch(() => props.dataId, (id) => {
  btnDisabled.value = (props.buttonMeta.btnKind === 'add') ? 
    false : id === ''
},
{ immediate: true })

</script>
